<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="v1">
<button @click="add">提交</button>
<!--<ul>
  <li v-for="(item,index) in list">
    {{item}}
  </li>
</ul>-->
  <!--html中引用的全局組件  content这个属性是你自定义的 -->
  <to-do v-for="(item,index) in list" :key="index" :content="item" :index="index" @del="hadleDelete"></to-do>
  <!--<xixi v-for="(item,index) in list" :key="index"></xixi>-->
</div>


</body>
<script type="text/javascript">

  /*全局組件*/
  Vue.component("to-do",{
    props:["content","index"],        // props這個属性来声明接收变量
    template:"<li @click='click_li'>{{content}}</li>",
    methods:{
      click_li:function(){
        this.$emit("del",this.index)
      }
    }
  })
  /*局部組件*/
  var xixi={
    template:"<li>xxxxx</li>"
  }
  new Vue({
    el: "#app",
    components:{
      xixi:xixi
    },
    data: {
      v1: "",
      list: []
    },
    methods: {
      add: function () {
        this.list.push(this.v1);
        this.v1 = "";
      },
      hadleDelete:function(index){
        this.list.splice(index,1)
      }
    }
  })
</script>
</html>
